<template>
  <div class="box">
    <p class="Count">数据统计</p>
    <p class="top-img"></p>
    <div class="charts" ref="charts"></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
let charts = ref<any>();
onMounted(() => {
  let mycharts = echarts.init(charts.value);
  let option = {
    tooltip: {
      //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
      confine: true,
      enterable: true, //鼠标是否可以移动到tooltip区域内
    },
    radar: {
      name: {
        textStyle: {
          color: "#05D5FF",
          fontSize: 14,
        },
      },
      shape: "polygon",
      center: ["50%", "50%"],
      radius: "80%",
      startAngle: 120,
      scale: true,
      axisLine: {
        lineStyle: {
          color: "rgba(5, 213, 255, .8)",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "rgba(5, 213, 255, .8)", // 设置网格的颜色
        },
      },
      indicator: [
        {
          name: "购物",
          max: 100,
        },
        {
          name: "餐饮",
          max: 100,
        },
        {
          name: "出行",
          max: 100,
        },
        {
          name: "娱乐",
          max: 100,
        },
        {
          name: "当地美食",
          max: 100,
        },
        {
          name: "观光风景",
          max: 100,
        },
      ],
      splitArea: {
        show: false,
      },
    },
    grid: {
      position: "center",
    },
    polar: {
      center: ["50%", "50%"], // 默认全局居中
      radius: "0%",
    },
    angleAxis: {
      min: 0,
      interval: 5,
      clockwise: false,
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    radiusAxis: {
      min: 0,
      interval: 20,
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: "消费统计图",
        type: "radar",
        symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
        symbolSize: 10, // 拐点的大小
        itemStyle: {
          normal: {
            color: "#05D5FF",
          },
        },
        areaStyle: {
          normal: {
            color: "#05D5FF",
            opacity: 0.5,
          },
        },
        lineStyle: {
          width: 2,
          color: "#05D5FF",
        },
        label: {
          normal: {
            show: true,
            formatter: (params: any) => {
              return params.value;
            },
            color: "#fff",
          },
        },
        data: [
          {
            value: [20, 50, 60, 60, 90, 80],
          },
        ],
      },
    ],
  };
  mycharts.setOption(option);
});
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  background: url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  margin-left: 10px;
  color: white;
  .top-img {
    margin-left: 20px;
    width: 67px;
    height: 7px;
    margin-top: 10px;
    background: url(../../images/dataScreen-title.png) no-repeat;
    background-size: 100% 100%;
  }
  .Count {
    margin-left: 20px;
    font-size: 20px;
  }
  .charts {
    height: 100%;
    margin-top: 30px;
  }
}
</style>
